<template>
  <div class="header">
    <div class="content">
      <n-menu
        v-model:value="activeKey"
        mode="horizontal"
        :options="menuOptions"
      />      
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import menuDatas from "../utils/menuDatas"

export default defineComponent({
  setup() {
    return {
      activeKey: ref('Home'),
      menuOptions: ref(menuDatas),
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 480px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(@/assets/ynwwsq_wwbjt.jpg);

  .content{
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
